<h1>GÓC ẢNH ĐẸP</h1>

<div class="gocAnhWrapper">
    <h3 class="gocAnhTitle">Bộ ảnh Sức Sống Trẻ</h3>
    <div class="gocAnhSlideWrapper">
        <div id="slideshow-1" class="gocAnhImages">
            <img src="images/sample_bo_anh_1.jpg" ref="0"/>
            <img src="images/sample_bo_anh_2.jpg" ref="1"/>
            <img src="images/sample_bo_anh_3.jpg" ref="2"/>
            <img src="images/sample_bo_anh_4.jpg" ref="3"/>
            <img src="images/sample_bo_anh_5.jpg" ref="4"/>
            <img src="images/sample_bo_anh_6.jpg" ref="5"/>
            <img src="images/sample_bo_anh_7.jpg" ref="6"/>
            <img src="images/sample_bo_anh_8.jpg" ref="7"/>
            <img src="images/sample_bo_anh_9.jpg" ref="8"/>
            <img src="images/sample_bo_anh_10.jpg" ref="9"/>
        </div>
    </div>
    <div class="gocAnhBg"></div>
    
    <div class="gocAnhRollerWrapper">
        <div id="slideshow-2" class="gocAnhImages">
            <img src="images/sample_bo_anh_1.jpg" ref="0" class="lighter"/>
            <img src="images/sample_bo_anh_2.jpg" ref="1"/>
            <img src="images/sample_bo_anh_3.jpg" ref="2"/>
            <img src="images/sample_bo_anh_4.jpg" ref="3"/>
            <img src="images/sample_bo_anh_5.jpg" ref="4"/>
            <img src="images/sample_bo_anh_6.jpg" ref="5"/>
            <img src="images/sample_bo_anh_7.jpg" ref="6"/>
            <img src="images/sample_bo_anh_8.jpg" ref="7"/>
            <img src="images/sample_bo_anh_9.jpg" ref="8"/>
            <img src="images/sample_bo_anh_10.jpg" ref="9"/>
        </div>
    </div>
    <div class="gocAnhCtrLeft" id="slidePrev"></div>
    <div class="gocAnhCtrRight" id="slideNext"></div>
    <div class="gocAnhCtrTop" id="slideRollerPrev"></div>
    <div class="gocAnhCtrBottom" id="slideRollerNext"></div>
    <span class="icons48 icons48_1 gocAnhCtrPause" id="gocAnhCtrPause"></span>
</div>

<h1 style="margin-bottom: 5px;">CÁC BỘ ẢNH KHÁC</h1>
<div class="brownLine"></div>

<div class="newsListRowWrapper">
    <div class="grid_3 alpha">
        <a href="main.php?show=goc_anh" class="link">
            <img src="images/sample_list_2.jpg" />
        </a>
    </div>
    <div class="grid_5 omega">
        <h3>
            <a href="main.php?show=goc_anh" class="link lnColor2">
                Tên bộ ảnh
            </a>
        </h3>
        <p class="newsListDate">01/07/2013</p>
        <p class="newsListSummary">
            No sea aperiri disputando, vitae vivendum reformidans id eos, mundi nullam latine vel in. Dolor pertinacia est in. Iudico vidisse tincidunt at quo, iusto laoreet ne his, ad nec ludus deseruisse. Vis et nibh omittam.
        </p>
    </div>
    <div class="clear"></div>
</div>
<div class="brownLine"></div>

<div class="newsListRowWrapper">
    <div class="grid_3 alpha">
        <a href="main.php?show=goc_anh" class="link">
            <img src="images/sample_list_3.jpg" />
        </a>
    </div>
    <div class="grid_5 omega">
        <h3>
            <a href="main.php?show=goc_anh" class="link lnColor2">
                Tên bộ ảnh
            </a>
        </h3>
        <p class="newsListDate">01/07/2013</p>
        <p class="newsListSummary">
            No sea aperiri disputando, vitae vivendum reformidans id eos, mundi nullam latine vel in. Dolor pertinacia est in. Iudico vidisse tincidunt at quo, iusto laoreet ne his, ad nec ludus deseruisse. Vis et nibh omittam.
        </p>
    </div>
    <div class="clear"></div>
</div>
<div class="brownLine"></div>

<div class="newsListRowWrapper">
    <div class="grid_3 alpha">
        <a href="main.php?show=goc_anh" class="link">
            <img src="images/sample_list_4.jpg" />
        </a>
    </div>
    <div class="grid_5 omega">
        <h3>
            <a href="main.php?show=goc_anh" class="link lnColor2">
                Tên bộ ảnh
            </a>
        </h3>
        <p class="newsListDate">01/07/2013</p>
        <p class="newsListSummary">
            No sea aperiri disputando, vitae vivendum reformidans id eos, mundi nullam latine vel in. Dolor pertinacia est in. Iudico vidisse tincidunt at quo, iusto laoreet ne his, ad nec ludus deseruisse. Vis et nibh omittam.
        </p>
    </div>
    <div class="clear"></div>
</div>
<div class="brownLine"></div>

<div class="newsListRowWrapper">
    <div class="grid_3 alpha">
        <a href="main.php?show=goc_anh" class="link">
            <img src="images/sample_list_5.jpg" />
        </a>
    </div>
    <div class="grid_5 omega">
        <h3>
            <a href="main.php?show=goc_anh" class="link lnColor2">
                Tên bộ ảnh
            </a>
        </h3>
        <p class="newsListDate">01/07/2013</p>
        <p class="newsListSummary">
            No sea aperiri disputando, vitae vivendum reformidans id eos, mundi nullam latine vel in. Dolor pertinacia est in. Iudico vidisse tincidunt at quo, iusto laoreet ne his, ad nec ludus deseruisse. Vis et nibh omittam.
        </p>
    </div>
    <div class="clear"></div>
</div>
<div class="brownLine"></div>

<div class="pager">
    <ul class="pagination">
        <li class="first hidden">
            <a href="javascript:void(0)" class="link">&Lt;</a>
        </li>
        <li class="previous">
            <a href="javascript:void(0)" class="link lnColor2">&Lt;</a>
        </li>
        <li class="page">
            <a href="javascript:void(0)" class="link lnColor2">1</a>
        </li>
        <li class="page">
            <a href="javascript:void(0)" class="link lnColor2">2</a>
        </li>
        <li class="page">
            <a href="javascript:void(0)" class="link lnColor2">3</a>
        </li>
        <li class="page">
            <a href="javascript:void(0)" class="link lnColor2">4</a>
        </li>
        <li class="page selected">
            <a href="javascript:void(0)" class="link lnColor2">5</a>
        </li>
        <li class="page">
            <a href="javascript:void(0)" class="link lnColor2">6</a>
        </li>
        <li class="page">
            <a href="javascript:void(0)" class="link lnColor2">7</a>
        </li>
        <li class="page">
            <a href="javascript:void(0)" class="link lnColor2">8</a>
        </li>
        <li class="page">
            <a href="javascript:void(0)" class="link lnColor2">9</a>
        </li>
        <li class="next">
            <a href="javascript:void(0)" class="link lnColor2">&Gt;</a>
        </li>
        <li class="last hidden">
            <a href="javascript:void(0)" class="link">&Gt;</a>
        </li>
    </ul>
</div>

<script type="text/javascript">
var slideshow_1 = $('#slideshow-1').cycle({
    log: false,
    timeout: 1000,
    fx: 'fade',
    prev: '#slidePrev',
    next: '#slideNext',
//    paused: true,
    pauseOnHover: false
});

var slideshow_2 = $('#slideshow-2').cycle({
    log: false,
    timeout: 0,
    fx: 'carousel',
    carouselVertical: true,
    carouselVisible: 5,
//    slideDimention: 60,
    allowWrap: false
});

slideshow_1.on('cycle-before', function(e, opts) {
    target = $('#slideshow-2').find('img[ref='+ opts.nextSlide + ']');
    target.siblings().removeClass('lighter');
    target.addClass('lighter');
});

slideshow_1.on('cycle-after', function(e, opts) {
    var index = opts.nextSlide;
    if ( (index % 4) === 0 ) {
        slideshow_2.cycle('goto', index);
    }
});

$('#slideshow-2 .cycle-slide').click(function(){
    var index = $('#slideshow-2').data('cycle.API').getSlideIndex(this);
    slideshow_1.cycle('goto', index);
    slideshow_2.cycle('goto', index);
});

/*-----------------------------------------------------------------------------
Controll button
-----------------------------------------------------------------------------*/
play = true;
$('#gocAnhCtrPause').click(function(){
    if ( play ) {
        slideshow_1.cycle('pause');
        $(this).addClass('icons48_2').removeClass('icons48_1');
        play = false;
    } else {
        slideshow_1.cycle('resume');
        $(this).addClass('icons48_1').removeClass('icons48_2');
        play = true;
    }
});
$('#slideshow-1, #gocAnhCtrPause').mouseover(function(){
    $('#gocAnhCtrPause').css('visibility', 'visible');
});
$('#slideshow-1').mouseout(function(){
    $('#gocAnhCtrPause').css('visibility', 'hidden');
});

$('#slideRollerPrev').click(function(){
    var index = parseInt( $('#slideshow-2').find('.cycle-slide-active').attr('ref') ) - 4;
    if ( index > 0 ) index = 0;
    slideshow_2.cycle('goto', index);
});  

$('#slideRollerNext').click(function(){
    var index = parseInt( $('#slideshow-2').find('.cycle-slide-active').attr('ref') ) + 4;
    var maxIndex = $('#slideshow-2 img').length - 1;
    if ( index > maxIndex ) index = maxIndex;
    slideshow_2.cycle('goto', index);
    console.log( index );
});  
</script>